/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="">
		<IndexHead :config='pageConfig'></IndexHead>
		<view class="head-fg">
			<image class="head-fg-img" src="/static/audio/head-fg.png" mode=""></image>
			<view class="spot-list" >
				<view class="item" v-for="(item,index) in spotData " :key='index'>
					<image class="item-img" :src="item.img" mode=""></image>
					<view class="place-tip">
						<view class='dot'></view>
						<text >{{item.tip}}</text>
					</view>
					<view class="spot-coll">
						<image src="/static/audio/coll-in.png" mode=""></image>
						<text>{{item.scNum}}</text>
					</view>
				</view>
			</view>
		</view>
		<top-view></top-view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						hasMenu:false,
						maxHead:false,
						showHeadBg:false,
						pageId:'binguan',
					},
					left:{
						showBack:true,
						showPos:false,
					},
					mid:{
						title:'沈阳故宫' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
					
				},
				spotData:[
					{
						img:'/static/linshi/sy-shenyanggugong.jpg',
						tip:'大政殿',
						scNum:233,
					},
					{
						img:'/static/linshi/sy-shenyanggugong.jpg',
						tip:'大清门',
						scNum:233,
					},
					{
						img:'/static/linshi/sy-shenyanggugong.jpg',
						tip:'崇政殿',
						scNum:233,
					},
					{
						img:'/static/linshi/sy-shenyanggugong.jpg',
						tip:'大政殿',
						scNum:233,
					},
					{
						img:'/static/linshi/sy-shenyanggugong.jpg',
						tip:'凤凰楼',
						scNum:233,
					},
					{
						img:'/static/linshi/sy-shenyanggugong.jpg',
						tip:'正门',
						scNum:233,
					}
				]
			}
		},
		methods: {
			
		},
		created(){
			
		}
	}
</script>

<style scoped>
	.head-fg{
		width: 750upx;
		height: auto;
		display: table;
		min-height: 500upx;
		background: #FFFFFF;
		position: absolute;
		top: 200upx;
		z-index: 2;
	}
	.head-fg-img{
		width: 750upx;
		height: 34upx;
		position: absolute;
		top:-34upx
	}
	.spot-list{
		width: 750upx;
		height: auto;
		display: table;
		position: absolute;
		top:-50upx
	}
	.item{
		width: 334upx;
		height: 366upx;
		border-radius: 20upx;
		margin-bottom: 30upx;
		position: relative;
	}
	.item-img{
		width: 336upx;
		height: 366upx;
		border-radius: 20upx;
		
	}
	.item:nth-child(odd){
		margin-left: 30upx;
		float: left;
	}
	.item:nth-child(even){
		margin-right: 30upx;
		float: right;
	}
	.place-tip{
		width: auto;
		position: absolute;
		bottom: 20upx;
		height: auto;
		left:20upx;
		display: flex;
		flex-direction:row;
		margin-right: 2%;
		padding-right: 20upx;
		border-radius: 20upx 8px 15px 0;
		background: rgba(0,0,0,0.6);
	}
	.place-tip text{
		padding: 4upx 0px 4upx 10upx;
		color: #FFFFFF;
		display:table;
		float: right;
		width: auto;
		line-height: 5vw;
		font-size: 3vw;
	}
	.dot{
		width: 8upx;
		height: 8upx;
		float: left;
		display: block;
		margin: auto 0px auto 10upx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.spot-coll{
		position: absolute;
		bottom: 30upx;
		right:20upx;
		display: flex;
		flex-direction:row;
	}
	.spot-coll image{
		width: 34upx;
		height: 34upx;
	}
	.spot-coll text{
		color: #FFFFFF;
		font-size: 26upx;
		margin-left: 20upx;
	}
</style>
